<!--底部菜单导航组件  -->
<template>
  <view class="bottom-ops-wrap">
    <view class="bottom-ops">
      <view
        class="bottom-ops-text"
        :class="{ flexEvenly: isShowButton === false }"
      >
        <!-- 导航 -->
        <block v-if="isShowIcon">
          <u-icon
            v-for="(item, index) in iconList"
            :key="index"
            :name="item.name"
            :label="item.label"
            :labelPos="item.labelPos"
            :color="item.color"
            :labelColor="item.labelColor"
            :size="item.size"
            :labelSize="item.labelSize"
            @tap="iconClickHandler(index, item.label)"
          ></u-icon>
        </block>
        <block><slot></slot></block>
        <!-- 按钮 -->
        <block v-if="isShowButton">
          <u-button
            type="primary"
            :text="buttonName"
            shape="circle"
            color="#ffbf01"
            size="large"
            @click="buttonHandler"
          ></u-button>
        </block>
      </view>
      <!-- 安全区域 -->
      <block v-if="isShowSafeArea">
        <view class="bottom-safe-area"></view>
      </block>
    </view>
    <view class="bottom-height-distance"></view>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    isShowSafeArea: {
      type: Boolean,
      default: true,
    },
    isShowButton: {
      type: Boolean,
      default: true,
    },
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    buttonName: {
      type: String,
      default: "提交",
    },
    iconList: {
      type: Array,
      default: [
        {
          name: "home",
          label: "首页",
          labelPos: "bottom",
          color: "#898989",
          labelColor: "#898989",
          size: "40rpx",
          labelSize: "20rpx",
        },
      ],
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //方法集合
  methods: {
    //左侧ICON按钮操作
    iconClickHandler(index, name) {
      this.$emit("iconClickHandler", {
        index,
        name,
      });
    },
    //右侧按钮操作
    buttonHandler() {
      this.$emit("buttonHandler");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.bottom-ops-wrap {
  width: 100%;
  padding: 10rpx 0;
  .bottom-ops {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #ffffff;
    padding: 0 40rpx;
    .bottom-ops-text {
      display: flex;
      padding: 14rpx 0;
      /deep/ view {
        padding-right: 40rpx;
      }
    }
    .flexEvenly {
      justify-content: space-evenly;
      align-items: center;
    }
  }
  .bottom-safe-area {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-height-distance {
    height: 100rpx;
  }
}
</style>
